/**
 * Created by kurry on 2017/8/20.
 */
/**
 * Created by kurry on 2017/8/20.
 */
import React from 'react';
import { Layout,Table, Button, Icon } from 'antd';
import './less/reviewInformation.less';
const { Header, Content} = Layout;
import 'antd/dist/antd.css';
import ModalComponent from './publicComponents/Modal'
class ReviewInformation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: [],  // 配置默认选中的列
      loading: false,
      isModalVisible: false,
      modalTitle:''//modal的标题
    }
  }

  componentWillMount(){

  }
  //表格自带函数
  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      });
    }, 1000);
  };
  onSelectChange = (selectedRowKeys) => {
    console.log(this.state);
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  //新增老师
  addNewItem = ()=>{
    this.setState({
      modalTitle:'newOne',//判断是否是新增的
      isModalVisible: true,
    })
  };


  //回调函数，子组件传值回来
  onChildChanged = (newState) => {
    console.log(newState)
    this.setState({
      isModalVisible: newState
    });
  };


  render() {

    const columns = [{
      title: '基本信息',
      dataIndex: 'foundationalInfo',
      render: (text, record) => (
        <span style={{display:'block',vertical:'middle'}}>
          <img src="https://image.youniwote.com/hqyy/home/tempPic.png" height="30px"/>
          <span className="ant-divider" />
          <a href="#">text</a>
        </span>
      ),
    }, {
      title: '课时',
      dataIndex: 'classTime',
    }, {
      title: '已添加课程数',
      dataIndex: 'haveAddClassNumbers',
    }, {
      title: '状态',
      dataIndex: 'situation',
    }, {
      title: '更新时间',
      dataIndex: 'refreshTime',
    }, {
      title: '操作',
      dataIndex: 'action',
      render: (text, record) => (
        <span>
      <a href="#" onClick={()=>{
        this.setState({
          isModalVisible:true,
          modalTitle: record.foundationalInfo
        })
      }}>修改 <Icon type="edit" /></a>
      <span className="ant-divider" />
      <a href="#">删除 <Icon type="delete" /></a>

    </span>
      ),
    }];

    const data = [];
    for (let i = 0; i < 46; i++) {
      data.push({
        key: i,
        foundationalInfo: `Edward King ${i}`,
        classTime: 32,
        haveAddClassNumbers: `50`,
        situation: `已完善`,
        refreshTime: `2017-08-21`,
        action: `删除`,
      });
    }

    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;

    return (
      <div>
        <Header style={{ background: '#fff',padding:'0px 80px'}} className="reviewInformation-nav-parent">
          <span>资料面板</span>
        </Header>

        <Content style={{ margin: '24px 16px 0' }}>
          <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
            <div style={{ marginBottom: 16 }}>
              <Button
                type="primary"
                style={{ marginLeft: 8 }}
                onClick={this.addNewItem}
              >
                添加老师
              </Button>
              <Button
                type="danger"
                style={{ marginLeft: 8 }}
                onClick={()=>{}}
                disabled={!hasSelected}
              >
                全部删除
              </Button>

              <Button
                onClick={this.start}
                loading={loading}
                style={{ marginLeft: 8 }}
              >
                刷新
              </Button>
              <span style={{ marginLeft: 8 }}>
            {hasSelected ? `已选中 ${selectedRowKeys.length} 项` : ''}
          </span>
            </div>
            <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
          </div>
        </Content>
        <ModalComponent isModalVisible={this.state.isModalVisible} callbackParent={this.onChildChanged} modalTitle={this.state.modalTitle}/>
      </div>
    )
  }
}

export default ReviewInformation;
